
<template>
  <div class="bg-white rounded-xl shadow-md hover:shadow-lg p-5 transition-all duration-300 ease-in-out border border-gray-100">
    <!-- 店铺头部 -->
    <div class="flex items-center justify-between mb-5">
      <div class="flex items-center">
        <div class="relative">
          <img :src="store.owner.avatar || defaultAvatar" alt="owner avatar" 
               class="w-14 h-14 rounded-full mr-4 border-2 border-green-100 object-cover shadow-sm">
          <span class="absolute bottom-0 right-3 w-4 h-4 bg-green-500 border-2 border-white rounded-full"></span>
        </div>
        <div>
          <h3 class="text-lg font-bold text-gray-800">{{ store.name }}</h3>
          <div class="flex items-center text-sm text-gray-500">
            <span>店主: {{ store.owner.name }}</span>
            <span class="mx-2">•</span>
            <div class="flex items-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
              </svg>
              <span class="ml-1">4.8</span>
            </div>
          </div>
        </div>
      </div>
      <button @click="toggleFollow" 
              :aria-label="isFollowing ? '取消关注店铺' : '关注店铺'"
              class="px-3 py-1 text-sm text-[#5cd3a3] border border-[#79c2a5] rounded-full hover:bg-[#5cd3a3] hover:text-white transition-all duration-200 focus:outline-none hover:shadow-sm">
        <i class="fa fa-plus mr-1" v-if="!isFollowing"></i>
        <i class="fa fa-check mr-1" v-else></i>
        {{ isFollowing ? '已关注' : '关注' }}
      </button>
    </div>
    
    <!-- 店铺描述 -->
    <div class="bg-gray-50 rounded-lg p-3 mb-5">
      <p class="text-gray-600 text-sm leading-relaxed">{{ store.description }}</p>
    </div>

    <!-- 商品展示 -->
    <div>
      <div class="flex items-center justify-between mb-3">
        <h4 class="font-bold text-gray-700 flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1 text-red-500" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clip-rule="evenodd" />
          </svg>
          推荐商品
        </h4>
        <span @click="viewAllProducts" 
              class="group text-xs text-green-600 hover:text-green-700 font-medium flex items-center cursor-pointer transition-all duration-300 hover:shadow-sm hover:translate-x-0.5">
          查看全部
          <svg xmlns="http://www.w3.org/2000/svg" 
               class="h-4 w-4 ml-1 transition-transform duration-300 group-hover:translate-x-0.5" 
               viewBox="0 0 20 20" 
               fill="currentColor">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          </svg>
        </span>
      </div>
      
      <div class="grid grid-cols-2 sm:grid-cols-5 gap-3">
        <div v-for="product in store.products" :key="product.id" 
             class="group relative bg-gray-50 rounded-lg overflow-hidden hover:shadow-md transition-all duration-200">
          <div class="relative h-20 overflow-hidden">
            <img :src="product.image" :alt="product.name" 
                 class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
            <div class="absolute inset-0 bg-black opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
          </div>
          <div class="p-1.5">
            <p class="text-xs font-medium text-gray-800 truncate group-hover:text-green-600 transition-colors duration-200 leading-tight">
              {{ product.name }}
            </p>
            <div class="flex items-center justify-between mt-0.5">
              <p class="text-xs text-green-600 font-bold">¥{{ product.price.toFixed(2) }}</p>
              <button @click.stop="addToCart(product)" 
                      class="text-xs text-orange-500 hover:text-orange-600 active:text-orange-700 transition-colors duration-200 p-0.5 rounded-full hover:bg-orange-50">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
                  <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3z" />
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
import defaultAvatar from '@/assets/default/userAvatar.jpg'

export default {
  name: 'StoreInfoCard',
  props: {
    store: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      defaultAvatar,
      isFollowing: false
    }
  },
  methods: {
    toggleFollow() {
      this.isFollowing = !this.isFollowing
      this.$emit('follow-store', {
        storeId: this.store.id,
        following: this.isFollowing
      })
    },
    viewAllProducts() {
      this.$emit('view-all-products', this.store.id)
    },
    addToCart(product) {
      this.$emit('add-to-cart', {
        storeId: this.store.id,
        product: product
      })
    }
  }
}
</script>

<style scoped>

</style>